@import '../../../scss/styles.scss';

@layer payload-default {
  .doc-drawer {
    &__header {
      width: 100%;
      margin-top: base(2.5);
      display: flex;
      flex-direction: column;
      gap: base(0.5);
      align-items: flex-start;
    }

    &__header-content {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      width: 100%;
    }

    &__header-text {
      margin: 0;
    }

    &__header-toggler {
      background: transparent;
      border: 0;
      margin: 0;
      padding: 0;
      cursor: pointer;
      color: inherit;

      &:focus,
      &:focus-within {
        outline: none;
      }

      &:disabled {
        pointer-events: none;
      }
    }

    &__header-close {
      border: 0;
      background-color: transparent;
      padding: 0;
      cursor: pointer;
      overflow: hidden;
      width: base(2);
      height: base(2);

      svg {
        width: base(2);
        height: base(2);
        position: relative;

        .stroke {
          stroke-width: 2px;
          vector-effect: non-scaling-stroke;
        }
      }
    }

    @include mid-break {
      .doc-drawer__header {
        margin-top: base(1.5);
        margin-bottom: base(0.5);
        padding-left: var(--gutter-h);
        padding-right: var(--gutter-h);
      }
    }
  }
}
